
var defaultUrl = 'http://172.16.1.167:8080';
var getUrlParam =  function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
};
Vue.filter('dealPrice',v=>{
    if(parseFloat(v)){
        return parseFloat(v).toFixed(2)
    }else{
        return 0
    }
});
Vue.filter('formatDate',v=>{
    if(v) return new Date(v).getFullYear();
    else return 2015
});
var priceBoard = new Vue({
    el:'#priceBoard',
    data:{
        isLocal:false,
        width:'0%',
        maxWidth:'100%',
        widthPercent:'',
        reportTemplate:{model:{}},
        modelInfo:{},
        params:{
            carBrandId:getUrlParam('carBrandId'),
            carModelId:getUrlParam('carModelId'),
            cityId:'',
            reportTemplateId:getUrlParam('reportTemplateId')
        },
        colorArr:[],
        baseData:{},
        priceData:[]
    },
    mounted:function () {
        layer.load('加载中',{
            shade: [0.1,'#000']
        });
        this.$nextTick(()=>{
            this.getData();
        })
    },
    methods:{
        // 获取地址栏参数
        watchLocal(){
            if(this.isLocal){
                this.params.cityId = '370200';
            }else{
                this.params.cityId = '';
            }
            layer.load('加载中',{
                shade: [0.1,'#000']
            });
            this.getData();
        },
        getData:function(){
            var _this = this;
            $.ajax({
                url:'/controller/priceReport/selectPriceAnalysisList',
                type:'post',
                data:this.params,
                dataType:'json',
                success:function (res) {
                    layer.closeAll('loading');
                    if(res.code == 1){
                        _this.baseData = res.result.priceAndCarCount;//最大最小值
                        //底部进度条高亮部分的宽度
                        _this.width = parseFloat(res.result.priceAndCarCount.carCount / res.result.onSaleTotal).toFixed(4)*100 > 100 ? '100%' : parseFloat(res.result.priceAndCarCount.carCount / res.result.onSaleTotal).toFixed(4)*100 + '%';
                        //底部进度条高亮部分位置显示
                        _this.widthPercent = parseFloat(res.result.priceAndCarCount.carCount / res.result.onSaleTotal).toFixed(4)*100 > 100 ? '100%' : parseFloat(res.result.priceAndCarCount.carCount / res.result.onSaleTotal).toFixed(4)*100 + '%';
                        _this.maxWidth = (parseFloat(_this.width.replace('%','')) - 45/parseInt(document.documentElement.clientWidth)*100).toFixed(2) + '%';
                        if(_this.width.replace('%','') < 8){
                            if(_this.width.replace('%','') == 0){
                                _this.width = 0;
                                _this.maxWidth = 0;
                                _this.widthPercent = '0%'
                            }else{
                                _this.width = '9%';
                                _this.maxWidth = '9%';
                            }
                        }
                        if(res.result.reportTemplate){
                            _this.reportTemplate = res.result.reportTemplate;
                        }else{
                            _this.reportTemplate = {model:{}}
                        }
                        if(res.result.modelInfo){
                            _this.modelInfo = res.result.reportTemplate;
                        }else{
                            _this.modelInfo = {}
                        }
                        //颜色数组
                        _this.colorArr = res.result.colors;
                        _this.renderColor();
                        //价格数组
                        _this.priceData = _this.formatDate(res.result.spiderPriceAvgs);//处理下日期格式，判断返回的价格字段是否合法
                        _this.renderPrice();
                    }
                }
            })
        },
        formatDate:function(arr){
            for(var i=0;i<arr.length;i++){
                var month = (new Date(arr[i].priceCreateTime).getMonth() + 1) < 10 ? "0" + (new Date(arr[i].priceCreateTime).getMonth() + 1):(new Date(arr[i].priceCreateTime).getMonth() + 1);
                var day =  new Date(arr[i].priceCreateTime).getDate() < 10 ? ("0" + new Date(arr[i].priceCreateTime).getDate()) : new Date(arr[i].priceCreateTime).getDate();
                arr[i].priceCreateTime = month + '-' + day;
                if(!parseFloat(arr[i].priceAvg)){
                    arr[i].priceAvg = 0;
                    console.log('第' + i + 1 + '条数据的价格有问题')
                }
            }
            return arr
        },
        renderPrice:function () {
            var _this = this;
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                color:['#EA5504'],
                grid: {
                    top:'17%',
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: _this.priceData.map(v=>v.priceCreateTime),
                    axisLine:{
                        lineStyle: {
                            color: '#777777'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: _this.priceData.length > 7,
                        xAxisIndex: [0],
                        startValue: 0,
                        endValue: 5
                    }
                ],
                yAxis: {
                    name:'价格',
                    type: 'value',
                    axisLabel: {
                        color: '#777777'
                    },
                    axisLine:{
                        lineStyle: {
                            color: '#777777'
                        }
                    }
                },
                series: [
                    {
                        name:'入库量',
                        type:'line',
                        symbolSize: 8,
                        data: _this.priceData.map(v=>parseFloat(v.priceAvg).toFixed(2)),
                        lineStyle:{
                            color:'#EA5504',
                            width:1
                        }
                    }
                ]
            };
            echarts.init(document.getElementById('price-echarts')).setOption(option)
        },
        renderColor:function () {
            var _this = this;
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : ['55%','80%'],
                        center: ['50%', '59%'],
                        data:_this.colorArr.map(v=>{return {name:v.colorName,value:v.colorCount}}),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                color:_this.colorArr.map(v=>v.colorCode),
                label: {

                        position:'outside',
                        color:"#666"

                },
                labelLine: {

                        lineStyle: {
                            color: "#666"
                        },
                        smooth: 0.2,
                        length: 5,
                        length2: 5

                },
                itemStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10
                },
            };
            echarts.init(document.getElementById('color-board')).setOption(option)
        }
    }
});

